<template>
    <div class="search_page">
        <div class="seach_input">
            <Input v-model="seach_text" :placeholder="nameWorknoParmes.placeText" @on-keyup="handleSeach" @on-focus="focusSeach" @on-blur="blurSeachCaseName"></Input>
        </div>
        <div class="seach_list" v-if="nameWorknoParmes.pages=='usermanage' && seachModal==true">
            <ul>
                <li v-for="(item,index) in seachList" @click="handleItemClick(item)">
                    <span>{{item.userName}}</span>(<span>{{item.workNo}}</span>)
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    
    import Helper from '@/common/helper'
    import Rest from '@/rest'
    import Api from '@/api'

    export default {
        data() {
            return {
               seach_text:'',
               seachModal:false,
               seachList:[]
            }
        },
        props: {
            nameWorknoParmes: {
                type: Object,
                default: function() {
                    return {
                        placeText:'',
                        
                    };
                }
            }
        },
        methods: {
            init() {
                var that = this;
                that.resetInit();
            },
            resetInit() {
                var that = this;
                that.seach_text='';
                that.seachModal=false;
                that.seachList=[];
            },
            handleSeach() {
                var that = this;
                that.getList()
                
            },
            focusSeach() {
                var that = this;
                
            },
            blurSeachCaseName() {
                var that = this;
                
            },
            blurSeachUserName() {
                var that = this;
                
            },
            
            handleItemClick(obj) {
                var that = this;
                that.seach_text=obj.userName
                that.$emit('roleNameSearch', obj);
                that.seachModal=false;
            },
            getList() {
                var that = this;
                that.caseList = [];
                var restApi =that.nameWorknoParmes.paths;
                var parms = {
                    "userName": that.seach_text
                }
                if(that.nameWorknoParmes.methods=="get") {
                    if(that.nameWorknoParmes.pages=="usermanage" && that.seach_text.length>0) {
                        Rest.get(restApi,parms).done((res) => {
                            if (Helper.isSuccess(res)) {
                                 if (res.data) {
                                     that.seachModal=true;
                                     that.seachList=res.data
                                 }
                            } else {
                                if (res.status && res.status.msg) {
                                    that.$Message.error(res.status.msg);
                                }
                            }
                        });
                    }
                    
                }else if(that.nameWorknoParmes.methods=="post") {
                    
                }
            },
        },
        created() {
            this.init();
        },
        activated() {
            // this.init();
        },
    }
</script>

<style lang="scss">
    @import "../../assets/sass/install";
    .search_page {
        position: relative;
        .seach_list {
            position: absolute;
            background: white;
            max-height: 200px;
            overflow-y: auto;
            z-index:999;
            border:1px solid #eeeeee;
            width: 100%;
            ul {
                li {
                    padding:4px 10px 4px 10px;
                    cursor: pointer;
                    &:hover {
                    	background: #f5f5f5;
                    }
                }
            }
        }
    }
</style>
